<template>
  <view class="c-image w100 h100 disb" @click="$emit('click')">
    <u-image
      v-if="url"
      :border-radius="borderRadius"
      :fade="false"
      :lazy-load="true"
      :mode="mode"
      :show-error="showError"
      :show-loading="showLoading"
      :src="url | tailor(resize)"
      bg-color="transparent"
      height="100%"
      width="100%"
      class="bgtr"
    >
      <u-loading slot="loading" />
      <template slot="error">
        <u-image
          :border-radius="borderRadius"
          :fade="false"
          :height="errorUrlSize"
          :mode="mode"
          :src="errorUrl"
          :width="errorUrlSize"
          bg-color="transparent"
        />
      </template>
    </u-image>
    <view v-else-if="showError" class="no-image">
      <u-image
        :border-radius="borderRadius"
        :fade="false"
        :height="errorUrlSize"
        :mode="mode"
        :src="errorUrl"
        :width="errorUrlSize"
        bg-color="transparent"
      />
    </view>
  </view>
</template>

<script>
export default {
  name: 'ServerImage',
  filters: {
    tailor(value, size) {
      // const reg = /^(http|https):\/\/(img\.tscebuy\.com|tscebuy-img1\.vzmapp\.cn|tscebuy-img1\.aiadcloud\.cn)\//g
      const reg = /^(http|https):\/\/(img\.vgood365\.com|tscebuy-img1\.vzmapp\.cn)\//g;
      if (value && reg.test(value) && size) {
        const arr = value.split('.');
        const len = arr.length;
        arr[len - 2] = arr[len - 2] + size;
        return arr.join('.');
      }

      const reg2 =
        /^(http|https):\/\/(livestreaming-(dev|prod)\.oss-cn-shenzhen\.aliyuncs\.com)\//g;
      const reg3 = /^(http|https):\/\/(yd-imgs\.380star\.com)\//g;
      const reg4 = /^(http|https):\/\/(xl-prod-obs\.obs\.cn-south-1\.myhuaweicloud\.com)\//g;
      if (value && (reg2.test(value) || reg3.test(value) || reg4.test(value)) && size) {
        // console.log(value)
        const sizeArr = size.replace(/_r|p/g, '').split('x');
        const [w, h] = sizeArr;
        let suffix = '';
        if (w || h) suffix += '?x-oss-process=image/resize,m_fixed';
        if (w) suffix += `,w_${w}`;
        if (h) suffix += `,h_${h}`;
        return value + suffix;
      }

      return value;
    },
  },
  props: {
    name: {
      type: String,
      default: '',
    },
    mode: {
      type: String,
      default: 'aspectFill',
    },
    showLoading: {
      type: Boolean,
      default: false,
    },
    showError: {
      type: Boolean,
      default: true,
    },
    resize: {
      type: String,
      default: '',
    },
    borderRadius: {
      type: String,
      default: '',
    },
    errorImageUrl: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      // placeholderSize: 0
      width: 0,
      height: 0,
    };
  },
  computed: {
    url() {
      let pre = this.imagePrefix;
      if (pre && this.name) return pre + this.name;
      return '';
    },
    errorUrl() {
      return (
        this.errorImageUrl ||
        `${this.imagePrefix}logo.png?x-oss-process=image/resize,m_fixed,w_300`
      );
    },
    errorUrlSize() {
      // if (this.errorImageUrl) return '100%'

      const { width } = this;
      const { height } = this;

      const shortSide = width >= height ? height : width;

      if (shortSide == 0) return 0;

      let coefficient = width >= height ? width / height : height / width;
      coefficient *= 0.8;
      coefficient = coefficient > 1 ? 1 : coefficient;
      return `${shortSide * coefficient}px`;
    },
  },
  mounted() {
    const that = this;
    const query = uni.createSelectorQuery().in(this);
    query.select('.c-image').boundingClientRect();
    query.exec((res) => {
      const { width = 0, height = 0 } = res[0] || {};
      that.width = width;
      that.height = height;
    });
  },
};
</script>

<style lang="less" scoped>
.no-image {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
}
</style>
